import { ExclamationCircleOutlined } from '@ant-design/icons';
import { withRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import Cookies from 'js-cookie';
import { setProductInfo } from '@/store/actions/order';
// css
import styles from '@/styles/CommonOrder.module.scss';
// api
import { productExtend } from '@/api/order';

const EntryTime = ({ router, _setProductInfo, order: { date }, data: { target } }) => {

    const { sr, order = [] } = router.query;
    const [goodsId, goodsExtendName] = order;
    const isHotel = target === '/hotel';
    
    // sr = 2, 显示时间段，否则不显示
    // 非“门票”“车辆”，不显示
    const isShow = (sr === '2' && (target === '/ticket' || target === '/car'));
    
    // 时间段array
    const [timeList, setTimeList] = useState([]);
    
    useEffect(() => {
        
        // 非酒店获取价格，酒店没有入园时间
        if(!isHotel){
            !isShow && date && _setProductInfo({
                goodsId,
                goodsExtendName,
                startDate: date,
                endDate: date,
                amount: Cookies.get('order_number'),
            })
        }
    }, [date]);

    if (!isShow) {
        return <></>
    }

    useEffect(() => {
        // 获取入园/用车时间段
        date && productExtend({ goodsId, goodsExtendName, useDate: date }).then(res => {
            const { code, data } = res;
            let spIds = [],
                timeItem = {};
            if (code === 0 && data) {
                data.forEach(item => {
                    const { specificationsTypeId, goodsSpecificationAppDTOS = [] } = item;
                    if(goodsSpecificationAppDTOS.length){
                        spIds.push(goodsSpecificationAppDTOS[0].goodsSpecificationsValueId);
                    }
                    if (specificationsTypeId === 2) {
                        timeItem = item;
                    }
                })
                if(timeItem.goodsSpecificationAppDTOS){
                    setTimeList(timeItem.goodsSpecificationAppDTOS);
                    setSelectTimeId(spIds);
                }
            }
        })
        // date：日期props更新后，才执行该hook，重新获取时间段array
    }, [date])

    // 设置选择时间段id
    function setSelectTimeId(spIds) {
        const ids = spIds.join();
        // 根据specificationsValueIds，获取价格
        _setProductInfo({
            goodsId,
            goodsExtendName,
            startDate: date || Cookies.get('order_select_date'),
            endDate: date || Cookies.get('order_select_date'),
            amount: Cookies.get('order_number'),
            specificationsValueIds: ids
        });
        Cookies.set('order_spIds', ids);
    }

    // 选择时间段
    function selectTime(item) {
        const ids = Cookies.get('order_spIds') || "";
        timeList.forEach(t => {
            if (t.goodsSpecificationsValueId === item.goodsSpecificationsValueId) {
                t.isFirst = true
            } else {
                t.isFirst = false
            }
        })
        setTimeList([...timeList]);
        setSelectTimeId(ids.split(','));
    }

    // 温馨提示
    const showTips = (
        <div className={styles['product-tip']}>
            {
                target === '/ticket' ?
                    <>
                        <span><ExclamationCircleOutlined /> 入园时段：</span>
                        <p>为贯彻落实国家及自治区相关会议和通知精神，确保各景区安全有序开放，切实保障游客和景区安全，请游客提前预约到园时间。</p>
                    </> :
                    <>
                        <span><ExclamationCircleOutlined /> 用车时段：</span>
                        <p>为贯彻落实国家及自治区相关会议和通知精神，确保各景区安全有序开放，切实保障游客安全，请游客提前预约取车时间。</p>
                    </>
            }
        </div>
    )

    return (
        <div className={styles['product-entry']}>
            {showTips}
            <div className={styles['product-entry-time']}>
                {
                    timeList.map((item, index) => {
                        const { goodsSpecificationsValue, isFirst, isCheck } = item
                        if (!isCheck) {
                            return <div className={styles['disabled']} key={index}>{goodsSpecificationsValue}</div>
                        }
                        return (
                            <div className={isFirst ? styles['selected'] : ''} onClick={() => { selectTime(item) }} key={index}>
                                {goodsSpecificationsValue}
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}
const mapStateToProps = (state) => {
    return {
        order: state.order
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        _setProductInfo: (v) => dispatch(setProductInfo(v))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(EntryTime))